<template>
  <div class="app-container">

    <div class="filter-container">
      <el-button class="filter-item"  type="primary" icon="el-icon-edit" @click="editOrAdd(0,0)">
        发布新版本
      </el-button>
      <el-button class="filter-item"  type="primary" icon="el-icon-edit" @click="editOrAdd(1,0)">
        发布热更新
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"

      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="所属县域">
        <template slot-scope="scope">
          {{ scope.row.areaName }}
        </template>
      </el-table-column>

      <el-table-column label="版本">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="版本号" align="center">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>
      <el-table-column label="热更新版本" align="center">
        <template slot-scope="scope">
          {{ scope.row.wgtCode }}
        </template>
      </el-table-column>
      <el-table-column label="发布时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.page" :limit.sync="params.pageSize" @pagination="fetchData" />


    <el-dialog :title="dialogTitles[dialogIndex]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="adminData"  label-width="80px" style="margin-left:50px;margin-right: 50px">

        <el-form-item label="所属县域" prop="areaCode">
          <template>
            <el-select v-model="adminData.areaCode" placeholder="请选择" >
              <el-option
                v-for="item in areaList"
                :key="item.listKey"
                :label="item.listValue"
                :value="item.listKey">
              </el-option>
            </el-select>
          </template>
        </el-form-item>


        <el-form-item label="更新文件" prop="file">
          <el-upload
            class="upload-demo"
            ref="upload"
            name="multipartFile"
            :action="uploadUrl"
            :data="adminData"
            :auto-upload="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item label="版本" prop="name" v-if="dialogIndex===0">
          <el-input v-model="adminData.name"/>
        </el-form-item>
        <el-form-item label="版本号" prop="code" v-if="dialogIndex===0">
          <el-input v-model="adminData.code" type="number"/>
        </el-form-item>

        <el-form-item label="版本号" prop="wgtCode" v-if="dialogIndex===1">
          <el-input v-model="adminData.wgtCode" type="number"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">
          取消
        </el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList,roleList,deleteUser,addUser,updateStatus } from '@/api/admin'
import {get} from "../../utils/request";
import { getAddress } from '@/api/user'
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import Calendar from '@/components/Cascader'
import {nowPassword} from '../../utils/constant'
export default {
  components: { Pagination,Calendar },
  directives: { waves },
  data() {
    var validatePass = (rule, value, callback) => {
      if(this.dialogIndex===1){
        //编辑时密码可为空
        callback();
      }
      if (!value) {
        return callback (new Error('请输入密码'))
      }else if(!(/^.{8,32}$/.test(value))){
        return callback(new Error("有效长度为8~32个字符"));
      } else if (!(nowPassword.test(value) )) {
        return callback(new Error("必须包含字母、数字、符号中至少2种"));
      }else{
        callback();
      }
      callback();
    }
    return {
      disable:false,
      list: [],
      listLoading: true,
      total: 10,
      dialogTitles: ['发布新版本','发布热更新'],
      dialogIndex: 0,
      dialogFormVisible: false,
      uploadUrl: process.env.VUE_APP_BASE_API+"/ht/addVersion.json",
      adminData: {

      },
      areaList:[],
      params: {
        page: 1,
        pageSize: 10,
        username: '',
        realName: ''
      },
      optionsTown:[{listKey: "-1", listValue: "请选择地址"}],
      rules: {
        areaCode: [{  required: true, message: '所属县域不能为空', trigger: 'change' }],
        name: [{  required: true, message: '版本不能为空', trigger: 'blur' }],
        code: [{  required: true, message: '版本号不能为空', trigger: 'blur' }],
        wgtcode: [{  required: true, message: '版本号不能为空', trigger: 'blur' }],
      },
      roleList: []
    }
  },
  created() {
    this.fetchData();
    this.initAreaList();
  },
  methods: {
    uploadSuccess(response, file, fileList){
         this.dialogFormVisible=false;
      this.$message({
        type: 'success',
        message: '发布成功!'
      });
      this.fetchData();
    },
    uploadError(response, file, fileList){
       console.log(response)
    },
    initAreaList(){
      get("/ht/areaList.json").then(res=>{
        this.areaList=res;
      })
    },
    fetchData() {
      this.listLoading = true
      get("/ht/versionList.json",this.params).then(response => {
        this.total=response.total
        this.list = response.rows;

        this.listLoading = false
      })
    },
    cancel(){
      //this.$refs.area.clearCheckedNodes();
      this.dialogFormVisible = false;
    },
    editOrAdd(index,item){
      this.adminData = Object.assign({}, item);
      this.adminData.type=0;
      this.rules.name[0].required=true;
      this.rules.code[0].required=true;
      this.rules.wgtcode[0].required=false;
      if(index===1){
        this.rules.name[0].required=false;
        this.rules.code[0].required=false;
        this.rules.wgtcode[0].required=true;
        this.adminData.type=1;
      }
      this.dialogIndex=index;
      this.dialogFormVisible=true;
      var areas = [];
      areas[0] = item.provinceCode;
      areas[1] = item.cityCode;
      areas[2] = item.countyCode;

      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    save(){
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$refs.upload.submit();
        }
      })
    },


    resetForm(){
      this.params={
        page:1,
        pageSize:10
      }
      this.$nextTick(()=>{
        this.fetchData();
      })
    }
  }
}
</script>
